<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
<!--
body {
-moz-box-shadow: 4px 4px 5px #888;
-webkit-box-shadow: 4px 4px 5px #888;
box-shadow: 4px 4px 5px #888;
}
-->
</style>
<head>
   	<script charset="UTF-8" type="text/javascript" src="Icon/buildUnicodeIcons.js"></script>
     <script src="../js01_start/d3.v3.js"></script>

  <title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body onload=sendSize()  style='padding:5px;border-radius:10px;border:2px solid lightblue;background-color:transparent;margin:0;font-family:arial'>
<div id=containerDiv style=background:linen>
<table   id=drawIconTopTable style='padding:3px;width:300px;'>
    <tr>
<td rowspan=6 valign=top>
<div id=drawIconButtonDiv  style='position:relative;top:0px;left:0px;background:white;height:330px;width:60px;overflow-y:auto;overflow-x:hidden;'>
<table id=dingbatTable cellpadding=0 cellspacing=2 style=width:40px;position:absolute;top:0px;left:0px;></table>
<table id=geometricTable cellpadding=0 cellspacing=2 style=display:none;width:40px;position:absolute;top:0px;left:0px;></table>
<table id=arrowTable cellpadding=0 cellspacing=2 style=display:none;width:40px;position:absolute;top:0px;left:0px;></table>
<table id=mathTable cellpadding=0 cellspacing=2 style=display:none;width:40px;position:absolute;top:0px;left:0px;></table>
<table id=technicalTable cellpadding=0 cellspacing=2 style=display:none;width:40px;position:absolute;top:0px;left:0px;></table>
<table id=symbolTable cellpadding=0 cellspacing=2 style=display:none;width:40px;position:absolute;top:0px;left:0px;></table>

</div>

</td>
    <td style='width:90%;' align=center><span id=iconDrawSpan>Select & Plant Icons</span></td>
    <td align=right valign=top><button  onClick=parent.closeDrawIcon()>X</button></td>

    </tr>


<tr>
<td colspan=2 ALIGN=CENTER>
Type:<select onchange=unicodeTypeSelected() id="unicodeTypeSelect">
        <option value=dingbat >DINGBATS</option>
        <option value=geometric >GEOMETRIC</option>
        <option value=arrow >ARROWS</option>
        <option value=math >MATHEMATICAL</option>
        <option value=technical >TECHNICAL</option>
        <option value=symbol >SYMBOLS</option>
</select>

</td>
</tr>
<tr><td colspan=2>
 <div style=padding:5px;font-size:80%;text-align:justify >
     <span id=editIconSpan>
         <i>
        Choose the type of Icon.
        Then click the desired icon button.
        Choose its size &amp; color.
        Then click on drawing to plant it.


         </i>


         </span>
         </div>

</td>
</tr>

<tr>

<td colspan=2  valign=center align=center>

    <span id=drawIconFillBg >Color:</span>
        <select  onChange=showDrawIconFillBg()  id=drawIconFillColorSelect><option title="none" >0</option></select>

    Size:<select id=drawIconFontSizeSelect onChange=parent.drawIconFontSizeSelected()  >
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>10</option>
    <option>15</option>
    <option>20</option>
    <option>25</option>
    <option selected>30</option>
    <option>35</option>
    <option>40</option>
    <option>45</option>
    <option>50</option>
    <option>60</option>
    <option>70</option>
    <option>80</option>
    <option>90</option>
    <option>100</option>
    <option>150</option>
    <option>200</option>
    <option>250</option>
    <option>300</option>
    <option>350</option>
    <option>400</option>
    <option>450</option>
    <option>500</option>
    </select>

    <br>
            Shadow:<input title="Add drop shadow" id=drawIconShadowCheck onClick=parent.drawIconShadowChecked() type="checkbox" />

</td>
</tr>




<tr  align=center>
<td colspan=2 >
    <button id=cancelDrawIconButton disabled title='cancel/remove this path' onClick=parent.cancelDrawIcon()>cancel</button>
    <button style='background-color:red;visibility:hidden' id=drawIconDeleteButton  onClick=parent.removeCurrentDrawIcon()>delete</button>
    <button id=finishDrawIconButton disabled onClick=parent.finishDrawIcon()>finish</button>
</td>
</tr>



</table>

</div>

<div style=position:absolute;top:0px;left:0px;visibility:hidden >
<svg id=sizerSVG width=1 height=1 overflow="visible" ></svg>
</div>
</body>
<script>
var PlantUnicode
function plantThisIcon(event)
{

    var iconType=unicodeTypeSelect.options[unicodeTypeSelect.selectedIndex].value
    var buttonTable=eval(iconType+"Table")
    var buttons=buttonTable.getElementsByTagName("button")

    for(var k=0;k<buttons.length;k++)
    {
        buttons[k].style.borderStyle=""
        buttons[k].style.borderColor=""
    }


   if(event.target.nodeName=="text")
    PlantUnicode=event.target.getAttribute("unicode")
   else
    PlantUnicode=event.target.firstChild.getAttribute("unicode")
    if(parent.ActiveElem)
    {      var code = parseInt(PlantUnicode, 16)
       parent.ActiveElem.text(String.fromCharCode(code))


    }

    parent.EditIcon=false
    parent.IconDeleted=false
    parent.Unicode=PlantUnicode
}


function showDrawIconFillBg()
{

   	var clr=drawIconFillColorSelect.options[drawIconFillColorSelect.selectedIndex].value
    drawIconFillBg.style.backgroundColor=clr

    var iconText=drawIconButtonDiv.getElementsByTagName("text")
    for(var k=0;k<iconText.length;k++)
    {
       var icon=iconText[k]
       icon.setAttribute("fill",clr)
    }



    if(parent.ActiveElem)
    {
       parent.ActiveElem.attr("fill",clr)


    }

}









function writeIconColorSelection()
{
   var DrawColors=parent.clrArray
    for(var k=1;k<DrawColors.length;k++)
    {
        var name=DrawColors[k][0]
        var myColor=DrawColors[k][1]
        var option=document.createElement("OPTION")
        option.style.backgroundColor=myColor
        option.value=myColor
        option.title=name+" "+myColor
                if(parent.hexString.indexOf(myColor)!=-1)
        option.style.color="white"

        option.text=k
        drawIconFillColorSelect.appendChild(option)
        /*
        var option=document.createElement("OPTION")
        option.style.backgroundColor=myColor
        option.value=myColor
        option.title=name+" "+myColor

        option.text=k+1
        drawIconStrokeColorSelect.appendChild(option)
        */
    }
    drawIconFillColorSelect.selectedIndex=353
  //	drawIconStrokeColorSelect.selectedIndex=23
    var clr=drawIconFillColorSelect.options[drawIconFillColorSelect.selectedIndex].value
    drawIconFillBg.style.backgroundColor=clr
  //	var clr=drawIconStrokeColorSelect.options[drawIconStrokeColorSelect.selectedIndex].value
  //	drawIconStrokeBg.style.backgroundColor=clr
}



//onload=sendSize();writeIconColorSelection();initIconSelect()
function sendSize()
{
   writeIconColorSelection()
   var width=document.body.scrollWidth+10
   var height=document.body.scrollHeight+10
   parent.sizeFrame('addElemIcon',width,height)

   buildDingbatButton()
   buildArrowButton()
   buildGeometricButton()
   buildMathButton()
   buildTechnicalButton()
   buildSymbolButton()

   if(parent.EditIcon==false)
       parent.startIconDraw()
    else
    {
        parent.setEditIcon()

     }
}
</script>
</html>